<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Home</title>
    <link rel="shortcut icon" th:href="@{/frontend/images/favicon.ico}"
          href="../../static/frontend/images/favicon.ico"/>
    <link href="../../static/frontend/css/bootstrap.css" th:href="@{/frontend/css/bootstrap.css}" rel="stylesheet"
          type="text/css"
          media="all"/>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../../static/frontend/js/jquery.min.js" th:src="@{/frontend/js/jquery.min.js}"></script>
    <!-- Custom Theme files -->
    <script src="../../static/frontend/layer/layer.js" th:src="@{/frontend/layer/layer.js}"></script>
    <!--theme-style-->
    <link href="../../static/frontend/css/style.css" th:href="@{/frontend/css/style.css}" rel="stylesheet"
          type="text/css" media="all"/>
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Fashion Mania Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);
    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- start menu -->
    <link href="../../static/frontend/css/memenu.css" th:href="@{/frontend/css/memenu.css}" rel="stylesheet"
          type="text/css" media="all"/>
    <link href="../../static/backend/css/Pager.css" th:href="@{/backend/css/Pager.css}" rel="stylesheet"
          type="text/css"/>
    <script type="text/javascript" src="../../static/frontend/js/memenu.js" th:src="@{/frontend/js/memenu.js}"></script>
    <script>$(document).ready(function () {
        $(".memenu").memenu();
    });</script>
    <script src="../../static/frontend/js/simpleCart.min.js" th:src="@{/frontend/js/simpleCart.min.js}"></script>
    <!-- slide -->
    <script src="../../static/frontend/js/responsiveslides.min.js"
            th:src="@{/frontend/js/responsiveslides.min.js}"></script>
    <script src="../../static/backend/js/jquery.pager.js" th:src="@{/backend/js/jquery.pager.js}"
            type="text/javascript"></script>
    <script>
        $(function () {
            $("#slider").responsiveSlides({
                auto: true,
                speed: 500,
                namespace: "callbacks",
                pager: true
            });
        });

    </script>
</head>
<body>


<!--banner-->
<div th:replace="frontend/common::header"></div>
<div class="banner">
    <div class="col-sm-3 banner-mat">
        <img class="img-responsive" src="../../static/frontend/images/ba1.jpg" th:src="@{/frontend/images/ba1.jpg}"
             alt=""/>
    </div>
    <div class="col-sm-6 matter-banner">
        <div class="slider">
            <div class="callbacks_container">
                <ul class="rslides" id="slider">
                    <li>
                        <img id="image1" src="../../static/frontend/images/111.jpg" th:src="@{/frontend/images/111.jpg}"
                             alt=""/>
                    </li>
                    <li>
                        <img id="image2" src="../../static/frontend/images/3333.jpg"
                             th:src="@{/frontend/images/3333.jpg}" alt=""/>
                    </li>
                    <li>
                        <img id="image3" src="../../static/frontend/images/4444.jpg"
                             th:src="@{/frontend/images/4444.jpg}" alt=""/>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        $("#image1").bind("click", function () {
            $(location).prop('href', '/fleastreet/category/103');
        });
        $("#image2").bind("click", function () {
            $(window).attr('location', '/fleastreet/category/101');
        });
        $("#image3").bind("click", function () {
            $(location).prop('href', '/fleastreet/category/102')
        });
        $("#image1").hover(function () {
            $(this).css("cursor", "pointer");
        });
        $("#image2").hover(function () {
            $(this).css("cursor", "pointer");
        });
        $("#image3").hover(function () {
            $(this).css("cursor", "pointer");
        });
    </script>
    <div class="col-sm-3 banner-mat">
        <img class="img-responsive" src="../../static/frontend/images/ba.jpg" th:src="@{/frontend/images/ba.jpg}"
             alt=""/>
    </div>
    <div class="clearfix"></div>
</div>

<div class="content">
    <div class="container">
        <div class="content-top">
            <h1 style="color: #00BFF0">所有商品</h1>
            <div class="content-top1">
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <div id="pager" style="margin-left: 600px"></div>
</div>

<script>

    var pagetotal;
    var pageSize = 12;
    $(function () {
                $.ajax({
                    url: "/fleastreet/product/total",
                    type: "get",
                    success: function (result) {
                        if (result.code == 0) {
                            pagetotal = Math.ceil(result.data / pageSize);
                            $("#pager").pager({pagenumber: 1, pagecount: pagetotal, buttonClickCallback: PageClick});
                        } else {
                            layer.msg("获取product/total失败：" + result.msg);
                        }
                    }
                });
            },
            PageClick(1));


    function PageClick(pageclickednumber) {
        $("#pager").pager({pagenumber: pageclickednumber, pagecount: pagetotal, buttonClickCallback: PageClick});
        $.ajax({
            type: "post",
            //分页查询，每页7个
            url: "/fleastreet/product/list/" + pageclickednumber + "?pageSize=" + pageSize,
            success: function (result) {
                if (result.code == 0) {
                    appendToPage(result.data);
                } else {
                    layer.msg("获取product/list失败：" + result.msg);
                }
            }
        });
    }

    // 将数据渲染进页面
    function appendToPage(data) {
        if (!data || !data.length > 0) {
            return;
        }
        var page = $(".content-top1");
        //清空页面
        page.html("");
        //遍历渲染
        for (var i = 0; i < data.length; i++) {
            var colmd3 = $("<div class='col-md-3 col-md2' style='margin-bottom: 40px;'></div>");
            var colmd1 = $("<div class='col-md1 simpleCart_shelfItem'> </div>");
            var url = '/fleastreet/product/' + data[i].productId;
            var aref = $("<a href='" + url + "'></a>");
            var imageSrc = '/fleastreet/manager/product/img/' + data[i].productId;
            var arefInner = $("<img style='height: 221px' class='img-responsive' src='" + imageSrc + "'/>");
            aref.append(arefInner);
            var h3inner = $("<h6 style='height: 40px;overflow: hidden;'>" + data[i].name + "</a></h6>");
            var divprice = $("<div class='price'></div>");
            var h5inner = $("<h5 class='item_price'>¥" + data[i].price + "</h5>");
            var value = data[i].productId;
            var ainner = $("<a onclick='addCart(" + value + ")' class='item_add'>加入购物车</a>");
            var clearinner = $("<div class='clearfix'></div>");
            divprice.append(h5inner);
            divprice.append(ainner);
            divprice.append(clearinner);
            colmd1.append(aref);
            colmd1.append(h3inner);
            colmd1.append(divprice);
            colmd3.append(colmd1);
            page.append(colmd3);

        }
    }
    function addCart(productId) {//加入购物车
//        var productId = $("#productId").val();
        if (!productId) {
            layer.msg("错误！");
            return;
        }
        $.get("/fleastreet/product/cart/add?productId=" + productId, function (data) {
            if (data.code == 0) {
                layer.msg("添加购物车成功！");
            } else {
                layer.msg(data.msg);
            }
        });
    }


</script>

<div th:replace="frontend/common::footer"></div>
</body>
</html>